<template>
	<view style="padding: 20px;">
		<view class="flex-row" style="flex-direction: row-reverse;">
			<view @click="cleanClick()" class="zsConter" style="color: white; padding: 2px 5px; background-color: red; border-radius: 4px; ">
				清除上次提交的内容
			</view>
		</view>
		<view class="row-lineConter" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px;">
				选择类型:
			</view>
			<picker :range="typeList" :value="model.type" @change="onPickerChange">
				<view class="typeBtn zsConter mainColor">
					{{model.type}}
				</view>
			</picker>
			<view class="" style="margin-left: 5px;">
				<uni-icons  type="down" size="20" color="#1E90FF"></uni-icons>
			</view>
			
		</view>
		<!-- 资源链接 -->
		<view class="flex-row" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; margin-top: 10px;">
				资源链接:
			</view>
			<view class="">
				<view class="textView" style=" height: 100px; ">
					<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:26rpx;"
						placeholder-style="font-size: 26rpx;" v-model="model.originalLinkContent" placeholder="请输粘贴分享链接" />
				</view>
				<!--  -->
				<view @click="analysisClick()" class="zsConter mainBgColor" style="margin-top: 10px; height: 40px; border-radius: 4px; color: white;">
					解析
				</view>
			</view>
		</view>
		<!-- 资源链接 -->
		<view class="flex-row" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; margin-top: 10px;">
				提取链接:
			</view>
			<view class="textView" style=" height: 60px; ">
				<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:26rpx;"
					placeholder-style="font-size: 26rpx;" v-model="model.extractLinks" placeholder="提取链接" />
			</view>
		</view>
		<!-- 标题 -->
		<view class="flex-row" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; margin-top: 10px;">
				资源标题:
			</view>
			<view class="textView" style=" height: 100px; ">
				<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:26rpx;"
					placeholder-style="font-size: 26rpx;" v-model="model.title" placeholder="请输入资源标题" />
			</view>
		</view>
		
	
		<!-- 介绍 -->
		<view class="flex-row" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; margin-top: 10px;">
				资源介绍:
			</view>
			<view class="textView" style=" height: 100px; ">
				<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:26rpx;"
					placeholder-style="font-size: 26rpx;" v-model="model.description" placeholder="请输入资源简介(可不填)" />
			</view>
		</view>
		<!-- 图片 -->
		<view class="flex-row" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; margin-top: 5px;">
				资源图片:
			</view>

		</view>
		<!-- 添加图片 -->
		<view class="flex-row" style="margin-top: 20px;">
			<!--  -->
			<view v-for="(item,index) in model.resourceImages" :key="index">
				<view class="column-levelCenter">
					<image style="width: 200rpx; height: 200rpx;" :src="item" mode=""></image>
					<view @click="deleteImageClick(index)" class="zsConter deleteBtn" style="margin-top: 10px;">
						删除
					</view>
				</view>
			</view>

			<view v-if="model.resourceImages.length < 3" @click="addImageClick()"
				class="addImageBtn column-levelCenter gColor"
				style="margin-left: 15px; flex-shrink: 0; justify-content: center; width: 200rpx; height: 200rpx;  border-radius: 8rpx;">
				<view class="blockTextColor" style="font-size: 40rpx; font-weight: bold;">
					+
				</view>
				<view class="blockTextColor " style="margin-top: 10rpx; font-size: 20rpx;">
					上传图片
				</view>
			</view>

		</view>
		
		<view @click="submitClick()" class="zsConter mainBgColor" style="margin-top: 30px; color: white; font-size: 16px; font-weight: bold; border-radius: 4px; height: 40px;">
			提交
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				model: {
					title: null,
					type:null,
					originalLinkContent:null,
					extractLinks:null,
					description:null,
					resourceImages: [],
				}
			}
		},
		onShow() {
			console.log('当前登录状态',this.$isLogin);
			if(this.$isLogin == false){
				var url = '../login-page/login-page';
				uni.redirectTo({
					url: url,
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '页面 ' + url + ' 跳转失败',
							showCancel: false
						})
					}
				})	
			}


			
			
		},
		onLoad() {
			this.getTypeList();
			// if (navigator.userAgent.indexOf('Mobile') > -1) {
			//     // 移动端
			// } else {
			//     // PC端
			
			// }
		},
		methods: {
			getTypeList() {
				this.$uniCloudApi.get_type_list().then(res => {
					// var typeModel = res[0]
					var list = [];
					res.forEach(item => {
						list.push(item.typeStr);
					});
					this.typeList = list;
					this.model.type = list[0];
				});
			},
			onPickerChange(e) {
				var index = e.detail.value;
				this.model.type = this.typeList[index]
				console.log('选择=', this.model.type)
			},
			addImageClick() {
				// this.$publicApi.chooseImage().then(filePath => {
				// 	this.$publicApi.uploadImage(filePath).then(url => {
				// 		this.model.resourceImages.push(url);
				// 	}).catch(err => {

				// 	});
				// }).catch(err => {

				// });
				
				this.$publicApi.batch_chooseImage().then(filePaths => {
					filePaths.forEach(path =>{
						this.$publicApi.uploadImage(path).then(url => {
							this.model.resourceImages.push(url);
						}).catch(err => {
										
						});
					});
					
				}).catch(err => {
				
				});
			},

			deleteImageClick(index) {
				this.model.resourceImages.splice(index,1);
			},
			getStrUrl(s) {
				var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
				var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
				s = s.match(reg);
				return (s && s.length ? s[0] : null);
			},
			
			//解析
			analysisClick(){
				var url = this.model.originalLinkContent;
				let cjurl = this.getStrUrl(url) //净化过后的url
				//小程序跳转
				let tzurl = cjurl.split('/s/')[1].split('?pwd')[0] //取出来链接
				let pwd = cjurl.split('/s/')[1].split('?pwd=')[1] //取出来提取码
				console.log('url==', tzurl, 'pwd=', pwd);
				this.model.extractLinks = cjurl;
				
			},
			//清除内容
			cleanClick(){
				this.model =  {
					title: null,
					type:this.typeList[0],
					originalLinkContent:null,
					extractLinks:null,
					resourceImages:[],
					description: null,
				}
			},
			submitClick(){
				console.log('提交数据==',this.model);
				
				if(this.model.originalLinkContent == null){
					this.$showToast('请粘贴分享链接')
					return
				}
				if(this.model.title == null){
					this.$showToast('请输入标题')
					return
				}
				const timestamp = new Date().getTime();
				this.model.releaseTime = timestamp.toString();
				uni.showLoading({
					title:'添加数据中...'
				})
				this.$uniCloudApi.addData(this.model).then(res=>{
					uni.hideLoading();
					if(res == true){
						this.$showToast('添加成功')
					} else {
						this.$showToast(res)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleStyle {
		font-size: 24rpx;
		font-weight: bold;
		color: #86909C;
	}

	.textView {
		padding: 8px;
		border-radius: 6px;
		border: 1px solid rgb(239, 239, 239);

	}

	.custom-textarea {
		max-width: 100%;
		max-height: 100%;
		/* 确保最大宽度不超过100% */
	}

	.gColor {
		background-color: rgb(244, 245, 247);
	}

	.deleteBtn {
		margin-left: 20rpx;
		color: white;
		font-size: 20rpx;
		height: 40rpx;
		padding: 0rpx 20rpx;
		border-radius: 8rpx;
		background-color: orangered;
	}

	.addImageBtn {
		border: 1px solid rgb(239, 239, 239);
		/* 设置1像素的黑色实线边框 */
		background-color: rgb(250, 250, 250);
		border-radius: 8rpx;
	}
</style>